<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<essay title="南京X地发生了xxx事件" time="2024-11-29"></essay>
			<essay title="BBB"></essay>
			<br /><br />
			<h1>学生信息</h1>
			<table>
				<student v-for="stu in stus" :id="stu.id" :name="stu.name" :age="stu.age"></student>
			</table>
		</div>
		
		<script>
			var app = Vue.createApp({
				data(){
					return {
						'stus': [
							{id: 001,name: '张三',age: 18},
							{id: 002,name: '李四',age: 19},
							{id: 003,name: '王五',age: 20}
						],
					}
				}
			})
			
			app.component('essay',{
				template: "<div><h2>标题：{{title}}{{time}}</h2></div>",
				props: ["title","time"]
			})
			
			app.component('student',{
				template:"<tr><td>{{id}}</td><td>{{name}}</td><td>{{age}}</td></tr>",
				props: ["id","name","age"]
			})
			
			var vm = app.mount("#app")
		</script>
	</body>
</html>
